<!--
 * @Author: boyyang
 * @Date: 2022-01-02 19:54:41
 * @LastEditTime: 2022-02-05 22:30:53
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\login\loginInpput.vue
-->

<template>
    <div class="login-input">
        <input
            :placeholder="props.placeholder"
            :type="props.type"
            :value="props.text"
            @input="textChange"
            class="input-box"
        />
    </div>
</template>

<script lang="ts" setup>
interface Props {
    text: string | number;
    type?: string;
    placeholder?: string
}
interface Emits {
    (e: 'update:text', val: any): void
}

// 参数
const props = withDefaults(defineProps<Props>(), {
    text: '',
    type: 'text',
    placeholder: '请输入内容'
})

// emit事件
const emit = defineEmits<Emits>()

const textChange = (e: any): void => {
    let val = e.target?.value
    emit('update:text', val)
}

</script>

<style scoped lang="scss">
.login-input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 24, 35, 0.7);
    border-radius: 5px;
    overflow: hidden;
}
.input-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    outline: none;
    background: none;
    border: none;
    padding: 0 10px 0;

    color: #e0eee8;

    &::-webkit-input-placeholder {
        font-size: 8px;
        color: #ffffff;
    }
}

// input:-webkit-autofill,
// textarea:-webkit-autofill,
// select:-webkit-autofill {
//     -webkit-text-fill-color: #ededed !important;
//     -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
//     background-color: rgba(0, 0, 0, 0.5) !important;
//     // background-image: none;
//     transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
// }
// input {
//     background-color: transparent;
// }
</style>
